<template>
  <view v-if="productList && productList.length > 0" class="h-coupon-goods" :style="[componentStyle]">
    <view class="_time-coupon">
      <view class="_title" :style="{'color':componentStyle.titleColor,'font-size': componentStyle.titleFontSize,'font-weight': componentStyle.titleFontWeight,'text-align': componentStyle.textAlign}">{{detail.componentTitle || ''}}</view>
      <view style="display: flex;align-items: center" v-if="showMore" @click="onMore(detail.id)">
        <text class="_more" :style="{'color':moreColor}">查看更多</text>
        <x-icon name="icon-017" size="22" :color="moreColor"/>
      </view>
    </view>
    <view class="goods-list">
      <scroll-view class="p-goods-list" scroll-x="true" scroll-left="0">
        <view
          class="_goods-detail"
          :style="{'borderRadius': componentStyle.borderRadius + 'rpx'}"
          v-for="(item, index) in productList"
          :key="index"
          :id="'pid' + index"
          @click="handleClick(item)"
        >
          <view class="_goods-img">
            <x-image :src="item.productMainPic" />
          </view>
          <view class="_goods-price">
            <view class="_after-coupon">券后价</view>
            <view style="color:#F00202;margin-left:5px;margin-top: -2px;">
              <x-price :price="item.postCouponPrice ? item.postCouponPrice : item.subsidyPrice ? item.subsidyPrice : item.productPrice" TipsSize="20" Price1Size="30" Price2Size="24" />
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import XPrice from '@/components/x-price';
import XImage from '@/components/x-image';
import navigateTo from '@/utils/x-navigate';
import formatStyle from '@/utils/x-format-style';
export default {
  name: 'HCouponGoods',
  components: { XImage, XPrice, XIcon },
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    sourcePageType: { // 埋点用
      type: [String, Object],
      default: '1'
    },
    sourcePageId: { // 埋点用源页面Id
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    },
    groupsSource: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      componentStyle: {},
      productList: []
    };
  },
  computed: {
    showMore() {
      return this.detail?.componentStyle.more.show || false;
    },
    moreColor() {
      return this.detail?.componentStyle.more.color || '#999999';
    }
  },
  created() {
    this.handleComponentStyle();
    this.getGoodsList();
  },
  mounted() {

  },
  onLoad(query) {
    this.query = query;
  },
  watch: {},
  // 滚动页面
  onPageScroll(e) {

  },
  /**
   * 下拉刷新
   * */
  onPullDownRefresh() {
  },
  // 页面触底加载数据
  onReachBottom() {
  },
  methods: {
    onMore(id) {
      uni.navigateTo({
        url: `/packages/coupon/coupon-centre/index?componentId=${this.detail.id}`
      });
      this.$XTrack('onCouponGoodsMore', {
        componentId: this.detail.id
      });
    },
    handleClick(item) {
      item.linkType = 2;
      item.linkContent = item.productId;
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source,
        groupsSource: this.groupsSource
      });
      this.$XTrack('onListToDetailEvent', {
        componentId: this.detail.id,
        productId: item.productId
      });
    },
    handleComponentStyle() {
      const { borderRadius, backgroundColor, backgroundImage, titleColor, titleFontSize, titleFontWeight, textAlign } = this.detail?.componentStyle;
      this.componentStyle = {
        ...formatStyle(this.detail?.componentStyle, ['marginBottom', 'padding', 'backgroundColor']),
        titleFontSize: titleFontSize * 2 + 'rpx',
        titleFontWeight: titleFontWeight,
        textAlign: textAlign,
        backgroundColor: backgroundColor,
        backgroundImage: `url(${backgroundImage})`,
        borderRadius: borderRadius === 1 ? '10rpx' : 0,
        titleColor: titleColor
      };
    },
    getGoodsList() {
      this.$http({
        url: '/product/app/component/product',
        data: {
          componentId: this.detail.id,
          pageNum: 1,
          pageSize: 10
        }
      }).then(res => {
        this.productList = res.data || [];
      }).catch(() => {

      });
    }
  }
};
</script>

<style lang="scss" scoped>
.h-coupon-goods{
  width: 702px;
  height: 400px;
  margin: 0px auto;
  padding: 0px 16px;
  z-index: 9;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  ._time-coupon{
    display: flex;
    height: 102px;
    align-items: center;
    ._title{
      flex: 1;
      font-size: 32px;
      font-weight: bold;
      color: $uni-color-default;
    }
  }
  ._more{
    font-size: 26px;
    color: $uni-color-info;
  }
  .coupon-list{
    margin-bottom: 16px;
  }
  ._title{
    flex: 1;
    font-size: 28px;
    font-weight: bold;
    color: $uni-color-default;
  }
  .goods-list{
    .p-goods-list{
      white-space: nowrap;
      width: 100%;
    }
    ._goods-detail{
      display: inline-block;
      box-sizing: border-box;
      width: 190px;
      min-height: 246px;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 16px;
      //border: 2px solid #EBEDF0;
      ._goods-img{
        width: 100%;
        height: 190px;
      }
      ._goods-price{
        height: 96px;
        text-align: center;
        font-size: 24px;
        color: $uni-color-default;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 12px 0;
        ._after-coupon{
          display: inline-block;
          background: #FFF8B9;
          color: #C26E31;
          font-size: 24px;
          border-radius: 6px;
          padding: 0 4px;
          margin-bottom: 10px;
        }
      }
    }
    ._goods-detail:last-child{
      margin-right: 0;
    }
  }
}
</style>
